<template>
    <ClientOnly>
        <popup
            :show="pupupShow"
            :clickModalClose="true"
            :title="'上下文预览（'+ context?.length +'条）'"
            width="600px"
            confirm-button-text=""
            cancel-button-text=""
            @close="handleClose()"
        >
            <div class="h-[60vh]">
                <el-scrollbar>
                    <div class="py-4 px-6">
                        <div
                            v-for="(item, index) in context"
                            :key="index"
                            class="py-[6px] px-[10px] border border-br-light rounded mb-[10px]"
                        >
                            <div class="font-medium text-tx-primary mb-2">
                                {{ item.role }}
                            </div>
                            <div class="text-muted text-sm whitespace-pre-wrap">
                                {{ item.content }}
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </popup>
    </ClientOnly>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        show: boolean;
        context?: any[];
    }>(),
    {
        context: () => []
    }
)

const emits = defineEmits<{
    (event: 'close'): void
}>()

const pupupShow = ref<boolean>(false)

const handleClose = () => {
    emits('close')
    pupupShow.value = false
}

watch(
    () => props.show,
    (val) => {
        pupupShow.value = val
    }, {
        immediate: true
    }
)
</script>
